<template>
	<el-table :data="tableData" style="width: 100%" class="spot-tables-current-table">
		<el-table-column prop="date" label="日期" />
		<el-table-column prop="coin" label="交易对">
			<template #default="scope">
				<div class="text-12px flex items-center pt-10px pb-10px">
					<span>{{ scope.row.coin }}</span>
					<el-icon class="ml-6px w-10px h-10px">
						<ArrowRight />
					</el-icon>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="methods" label="类型" :filters="[
			{ text: '限价委托', value: '限价委托' },
			{ text: '市价委托', value: '市价委托' }
		]" :filter-multiple="false" filter-class-name="filter-spot-tables" :filter-method="filterMethods">
			<template #filter-icon>
				<el-icon class="ml-6px">
					<CaretBottom />
				</el-icon>
			</template>
		</el-table-column>
		<el-table-column prop="to" label="方向" :filters="[
			{ text: '买', value: '买' },
			{ text: '卖', value: '卖' }
		]" :filter-multiple="false" filter-class-name="filter-spot-tables" :filter-method="filterTo">
			<template #filter-icon>
				<el-icon class="ml-6px">
					<CaretBottom />
				</el-icon>
			</template>
			<template #default="scope">
				<div>
					<span class="text-#07B175" v-if="scope.row.to == '买'">{{ scope.row.to }}</span>
					<span class="text-#F34E5F" v-if="scope.row.to == '卖'">{{ scope.row.to }}</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="price" label="委托价格" />
		<el-table-column prop="account" label="委托数量" />
		<el-table-column prop="trade" label="成交数量">
			<template #default="scope">
				<div>
					<span v-if="scope.row.trade">
						{{ scope.row.trade }}
					</span>
					<span v-else>
						--
					</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="sum" label="金额" />
		<el-table-column label="全撤" align="right">
			<template #header>
				<div>
					<span class="text-#114CEE">全撤</span>
				</div>
			</template>
			<template #default="scope">
				<div class="cursor-pointer" @click="noticeBoxShow = true">
					<img src="/transaction/spot/delete.svg" alt="" class="w-14px h-14px">
				</div>
			</template>
		</el-table-column>
	</el-table>
	<NoticeBox :is-show="noticeBoxShow" @close="closeNoticeBox">
		<template #default>
			<div class="text-#ffffff text-18px">
				<p class="ml-20px">撤单成功</p>
			</div>
		</template>
	</NoticeBox>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import NoticeBox from '../components/NoticeBox.vue';

const noticeBoxShow = ref<boolean>(false);
const closeNoticeBox = (val:any) => {
	noticeBoxShow.value = val;
};
const tableData = ref<any[]>([
	{
		date: "04-02 12:00:30",
		coin: "BTC/USDT",
		methods: "限价委托",
		to: '买',
		price: '323.30',
		account: '500.00',
		trade: '',
		sum: "2.60 USDT"
	},
	{
		date: "04-02 12:00:30",
		coin: "BTC/USDT",
		methods: "限价委托",
		to: '买',
		price: '323.30',
		account: '500.00',
		trade: '500.00',
		sum: "2.60 USDT"
	},
	{
		date: "04-02 12:00:30",
		coin: "BTC/USDT",
		methods: "限价委托",
		to: '卖',
		price: '323.30',
		account: '500.00',
		trade: '500.00',
		sum: "2.60 USDT"
	}
])

const filterMethods = (value: string, row: any) => {
	return row.methods === value
}
const filterTo = (value: string, row: any) => {
	return row.to === value
}
</script>
<style lang="scss" scoped>
.spot-tables-current-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>
<style lang="scss">
.filter-spot-tables {
	color: #fff;
	--el-border-color-light: #202020;

	.el-table-filter__list {
		padding: 0;
		background-color: #121212;
		border-color: #202020;

		.is-active {
			background-color: #121212;
			color: #114CEE;
		}
	}
}
</style>
